/* eslint-disable no-unused-vars */

import * as d3 from 'd3'

export function init(){
  // 获取父元素
  const d3Dom = d3.select('.d3_study')

  // 插入svg
  const d3Svg = d3Dom.append('svg')
    .attr('width',900)
    .attr('height',700)
    .classed('d_study_4',true)

  /* 固定动画 start */
  // 插入圆
  const circle1 = d3Svg.append('circle')
    .attr('cx', 100)
    .attr('cy', 100)
    .attr('r', 50)
    .attr('fill', '#f00')

  // 创建一个缓动函数
  const ease = d3.easeCubic

  // 应用缓动函数到动画
  circle1.transition()
    .duration(2000) // 动画持续时间
    .ease(ease) // 应用缓动函数
    .attr('cx', 100) // 动画结束时的cx值
    .attr('cy', 100) // 动画结束时的cy值
    .attr('r', 90) // 动画结束时的r值
    .attr('fill', 'blue') // 动画结束时的fill值
  /* 固定动画 end */

  /* 循环动画 start */
  // 插入组
  const g2 = d3Svg.append('g')
    .attr('transform','translate(100,300)')
  // 插入圆
  const circle2 = g2.append('circle')
    .attr('r', 50)
    .attr('fill', '#0f0')
  // 插入文本
  const text2 = g2.append('text')
    .attr('text-anchor', 'middle')
    .attr('font-size', '17px')
    .attr('font-weight', '600')
    .attr('dy',6)
    .attr('fill','#fff')
    .text('循环动画')

  // 创建一个缓动函数
  const easeCircleIn = d3.easeCircleIn
  const easeCircleOut = d3.easeCircleOut
  function animation() {
    // 创建一个动画链
    g2.transition()
      .duration(1000) // 动画持续时间
      .ease(easeCircleIn) // 应用缓动函数
      .attr('transform','translate(100,650)')
      .transition()
      .duration(1500) // 动画持续时间
      .ease(easeCircleOut) // 应用缓动函数
      .attr('transform','translate(100,300)')
      .on('end', animation)
  }
  animation()
  /* 循环动画 end */

  /* 鼠标移入过渡 start */
  const g3 = d3Svg.append('g')
    .attr('transform','translate(400,100)')
  // 插入圆
  const circle3 = g3.append('circle')
    .attr('r', 30)
    .attr('fill', '#00f')
  // 插入文本
  const text3 = g3.append('text')
    .attr('text-anchor', 'middle')
    .attr('font-size', '17px')
    .attr('font-weight', '600')
    .attr('dy',6)
    .attr('fill','#fff')
    .text('鼠标移入过渡')

  // 创建一个缓动函数
  const easeCubic = d3.easeCubic

  // 鼠标移入动画
  g3.on('mouseover',function (params) {
    circle3.transition()
      .duration(200) // 动画持续时间
      .ease(easeCubic) // 应用缓动函数
      .attr('r', 60) // 动画结束时的r值
      .attr('fill', 'blue') // 动画结束时的fill值
  })

  // 鼠标移出动画
  g3.on('mouseout',function (params) {
    circle3.transition()
      .duration(300) // 动画持续时间
      .ease(easeCubic) // 应用缓动函数
      .attr('r', 30) // 动画结束时的r值
      .attr('fill', 'blue') // 动画结束时的fill值
  })

  /* 鼠标移入过渡 end */

}
